<!--
 * @Descripttion: 积分发行商管理-积分发行商详情
 * @Author: binbin binbin@ssc-hn.com
 * @Date: 2025-03-13
 * @LastEditors: Bart 1714877505@qq.com
 * @LastEditTime: 2025-04-01
-->
<template>
  <div class="integral-detail">
    <div class="detail-content">
      <div class="detail-header">
        <arrow-left-outlined :style="{ 'font-weight': 'bold', 'margin-right': '18px' }" @click="router.back()" />
        <span>详情</span>
      </div>
      <a-divider />
      <div class="detail-list">
        <div class="detail-box">
          <div class="box-title"> <span>审批详情</span> </div>
          <div class="approve-detail">
            <div class="approve-btn" v-if="detailType === '1'">
              <a-button type="primary" @click="handleEdit()" v-if="detail.auditStatus === 0">修改</a-button>
              <a-popconfirm placement="leftBottom" v-if="detail.auditStatus === 1" ok-text="确定" cancel-text="取消" @confirm="handleDestory()">
                <template #title>
                  <p>撤销确认</p>
                  <p class="w-[200px]">您确认撤销吗？</p>
                </template>
                <a-button type="primary" danger>撤销</a-button>
              </a-popconfirm>
            </div>
            <div class="approve-btn" v-if="detailType === '2' && taskStatus === '2' && isApprove === false">
              <a-button type="primary" @click="handleAgree()">同意</a-button>
              <a-button type="primary" @click="handleReject()" danger>拒绝</a-button>
            </div>
            <div class="approve-content">
              <div class="approve-icon"></div>
              <div class="approve-info">
                <div class="approve-title">{{ detail.companyName }}</div>
                <div class="approve-name">
                  <a-form-item style="margin-right: 24px" label="积分名称">{{ detail.coinName }}</a-form-item>
                  <a-form-item label="发行/增发/销毁数量">{{ detail.integralCount }}</a-form-item>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="detail-box">
          <div class="box-title"> <span>项目信息</span> </div>
          <a-row>
            <a-col :span="8">
              <a-form-item label="审批类型">
                {{
                  typeList
                    .filter((v) => v.value === detail.auditType)
                    .map((item) => item.label)
                    .join('')
                }}
              </a-form-item>
            </a-col>
            <a-col :span="8">
              <a-form-item label="审批状态">
                {{
                  stateList
                    .filter((v) => v.value == detail.auditStatus)
                    .map((item) => item.label)
                    .join('')
                }}
              </a-form-item>
            </a-col>
            <a-col :span="8">
              <a-form-item label="积分名称">{{ detail.coinName }}</a-form-item>
            </a-col>
            <a-col :span="8">
              <a-form-item label="积分代号">{{ detail.coinSymbol }}</a-form-item>
            </a-col>
            <a-col :span="8">
              <a-form-item label="积分类型">
                {{
                  integralTypeList
                    .filter((v) => v.value == detail.moduleType)
                    .map((item) => item.label)
                    .join('')
                }}
              </a-form-item>
            </a-col>
            <a-col :span="8">
              <a-form-item label="区块链">{{ detail.chainType }}</a-form-item>
            </a-col>
            <a-col :span="8">
              <a-form-item label="发行数量">{{ detail.integralCount }}</a-form-item>
            </a-col>
            <a-col :span="8">
              <a-form-item label="兑换比值">1:{{ detail.ratio }}</a-form-item>
            </a-col>
            <a-col :span="8">
              <a-form-item label="项目官网">{{ detail.officialSite }}</a-form-item>
            </a-col>
            <a-col :span="8">
              <a-form-item label="积分简介">{{ detail.introduction }}</a-form-item>
            </a-col>
            <a-col :span="8">
              <a-form-item label="" />
            </a-col>
          </a-row>
        </div>
        <div class="detail-box">
          <div class="box-title"> <span>存管信息</span> </div>
          <a-row>
            <a-col :span="8">
              <a-form-item label="存管银行" v-if="supervisionOption.length">{{
                supervisionOption
                  .filter((v) => v.companyId == detail.supervisionType)
                  .map((item) => item.companyName)
                  .join('')
              }}</a-form-item>
            </a-col>
            <a-col :span="8">
              <a-form-item label="监管账号">{{ detail.supervisionAccount }}</a-form-item>
            </a-col>
            <a-col :span="8">
              <a-form-item label="存管文件">
                <a class="login-link" v-if="detail.supervisionFiles" @click="handleDownload(detail.supervisionFiles)">{{ detail.supervisionFiles ? detail.supervisionFiles.substring(detail.supervisionFiles.lastIndexOf('/') + 1) : '' }}</a>
              </a-form-item>
            </a-col>
          </a-row>
        </div>
        <div class="detail-box">
          <div class="box-title"> <span>监管机构</span> </div>
          <a-row>
            <a-col :span="24" v-if="superOption.length">
              <a-form-item label="监管机构">{{
                superOption
                  .filter((v) => v.companyId == detail.companyId)
                  .map((item) => item.companyName)
                  .join('')
              }}</a-form-item>
            </a-col>
            <a-col :span="24">
              <a-form-item label="监管文件">
                <a class="login-link" v-if="detail.superFiles" @click="handleDownload(detail.superFiles)">{{ detail.superFiles ? detail.superFiles.substring(detail.superFiles.lastIndexOf('/') + 1) : '' }}</a>
              </a-form-item>
            </a-col>
          </a-row>
        </div>
      </div>
    </div>
    <div class="detail-progress">
      <div class="progress-title"> <span>审批流程</span> </div>
      <Record v-if="detail.auditStatus !== 0" :recordList="recordList" />
      <div v-if="detail.auditStatus === 0">暂无数据</div>
    </div>
    <div class="modal">
      <Advice v-model:visible="modalAdvice.visible" :type="modalAdvice.type" :taskId="taskId" :auditId="auditId" @success="modalAdvice.success" />
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { ArrowLeftOutlined } from '@ant-design/icons-vue'
  import { message } from 'ant-design-vue'
  import { onMounted, onUnmounted, reactive, ref } from 'vue'
  import { onBeforeRouteLeave, useRoute, useRouter } from 'vue-router'

  import { requestGetCoinAuditInfo, requestGetCompanyList, requestGetTaskRecord, requestRevokeTask } from '/@/api/integral/integralIssuer'
  import { HttpCodeEnum } from '/@/enums/httpEnum'
  import { clearIsApprove, getIsApprove, saveIsApprove } from '/@/storage'

  import Advice from './components/advice.vue'
  import Record from './components/record.vue'

  const router = useRouter()
  const route = useRoute()
  const coinId = route.query.coinId
  const detailId = route.query.id
  const detailType = route.query.type || '1'
  const taskId: any = route.query.taskId || ''
  const auditId: any = route.query.auditId || ''
  const taskStatus: any = route.query.taskStatus || ''
  const orderId = ref('')
  const isApprove = ref(false)
  const detail = ref<any>({})
  const recordList = ref<any>([])
  const supervisionOption = ref<GetCompanyListTypes.IResponse[]>([])
  const superOption = ref<GetCompanyListTypes.IResponse[]>([])
  const typeList = ref([
    {
      value: 1,
      label: '积分发行',
    },
    {
      value: 2,
      label: '积分增发',
    },
    {
      value: 3,
      label: '积分销毁',
    },
  ])

  const integralTypeList = ref([
    {
      value: 1,
      label: '普通积分',
    },
    {
      value: 2,
      label: '稳定积分',
    },
  ])
  const stateList = ref([
    {
      value: 0,
      label: '待提交',
    },
    {
      value: 1,
      label: '待审核',
    },
    {
      value: 2,
      label: '已发行',
    },
    {
      value: 3,
      label: '驳回',
    },
    {
      value: 4,
      label: '撤销',
    },
  ])
  const getInfoById = async () => {
    const { responseCode, responseData } = await requestGetCoinAuditInfo({
      coinAuditInfoId: Number(detailId),
    })
    if (responseCode === HttpCodeEnum.SUCCESS) {
      detail.value = { ...responseData }

      if (responseData?.supervisionInfoList && responseData?.supervisionInfoList.length) {
        responseData?.supervisionInfoList.forEach((item) => {
          if (item.supervisionType === 1) {
            detail.value.supervisionType = item.companyId
            detail.value.supervisionAccount = item.supervisionAccount
            detail.value.supervisionFiles = item.supervisionFiles
          } else if (item.supervisionType === 2) {
            detail.value.companyId = item.companyId
            detail.value.superFiles = item.supervisionFiles
          }
        })
      }
      if (detail.value.orderId && detail.value.orderId !== null) {
        if (detailType === '1') {
          orderId.value = detail.value.orderId
        }
      }
      if (detail.value.auditStatus !== 0) {
        getTaskRecord()
      }
    }
  }

  /**
   * 获取存管银行
   */
  const getSupervisionOptionList = async () => {
    const { responseCode, responseData } = await requestGetCompanyList({
      companyLabel: 4,
    })
    if (responseCode === HttpCodeEnum.SUCCESS) {
      supervisionOption.value = responseData
    }
  }

  /**
   * 获取监管机构
   */
  const getSuperOptionList = async () => {
    const { responseCode, responseData } = await requestGetCompanyList({
      companyLabel: 5,
    })
    if (responseCode === HttpCodeEnum.SUCCESS) {
      superOption.value = responseData
    }
  }
  /**
   * 获取审批记录
   */
  const getTaskRecord = async () => {
    const { responseCode, responseData } = await requestGetTaskRecord({
      queryId: detailType === '1' ? orderId.value : taskId,
      queryType: detailType === '1' ? 1 : 2,
    })
    if (responseCode === HttpCodeEnum.SUCCESS) {
      recordList.value = responseData.recordList
    }
  }
  const handleEdit = () => {
    router.push({
      path: '/integral-issuer/manage/add',
      query: { coinId: coinId, id: detailId },
    })
  }

  /** 新增弹窗 */
  const modalAdvice = reactive({
    visible: false,
    type: 1,
    success: () => {
      isApprove.value = true
      saveIsApprove(isApprove.value ? '1' : '0')
      if (taskId) {
        getTaskRecord()
      }
    },
  })

  const handleDestory = async () => {
    const res = await requestRevokeTask({
      businussId: detail.value.auditId,
    })
    if (res.responseCode === HttpCodeEnum.SUCCESS) {
      message.success('操作成功')
      getInfoById()
    }
  }
  /**
   * 同意
   */
  const handleAgree = () => {
    modalAdvice.type = 1
    modalAdvice.visible = true
  }
  /**
   * 拒绝
   */
  const handleReject = () => {
    modalAdvice.type = 2
    modalAdvice.visible = true
  }

  const handleDownload = (_url: string) => {
    // // 创建一个临时链接
    // const url = window.URL.createObjectURL(new Blob([_url]))
    // // 创建一个隐藏的 <a> 标签
    // const link = document.createElement('a')
    // link.href = url
    // link.setAttribute('download', _url.substring(_url.lastIndexOf('/') + 1)) // 设置下载文件的名称
    // document.body.appendChild(link)
    // link.click() // 触发下载
    // document.body.removeChild(link) // 移除 <a> 标签
    // window.URL.revokeObjectURL(url) // 释放临时链接
    // window.open(_url, '_blank')
    fetch(_url)
      .then((res) => res.blob())
      .then((blob) => {
        const a = document.createElement('a')
        document.body.appendChild(a)
        a.style.display = 'none'
        const url = window.URL.createObjectURL(blob)
        a.href = url
        a.download = _url.substring(_url.lastIndexOf('/') + 1)
        a.click()
        document.body.removeChild(a)
        window.URL.revokeObjectURL(url)
      })
  }
  onMounted(() => {
    getInfoById()
    getSupervisionOptionList()
    getSuperOptionList()
    if (getIsApprove() && getIsApprove() === '1') {
      isApprove.value = true
    } else {
      isApprove.value = false
    }
  })
  onUnmounted(() => {
    clearIsApprove()
  })
</script>

<style lang="less" scoped>
  .integral-detail {
    display: flex;
    min-height: 100%;

    .detail-content {
      display: flex;
      flex: 1;
      flex-direction: column;
      background: #fff;
      padding: 24px;
      margin-right: 24px;

      .detail-header {
        font-size: 18px;
        font-weight: 500;
        color: #000;
      }

      .detail-list {
        display: flex;
        flex-direction: column;

        .detail-box {
          display: flex;
          flex-direction: column;

          .box-title {
            width: 100%;
            display: flex;
            align-items: center;
            margin-bottom: 20px;

            span {
              font-size: 16px;
              color: #000;
              font-weight: 600;
              display: flex;
              align-items: center;
            }

            span::before {
              content: '';
              width: 4px;
              height: 16px;
              background: #006aff;
              display: inline-block;
              margin-right: 10px;
            }
          }

          .approve-detail {
            display: flex;
            flex-direction: column;

            .approve-btn {
              display: flex;
              justify-content: flex-end;
              flex-direction: row;
              align-items: center;
              margin-top: 20px;

              .ant-btn {
                & + * {
                  margin-left: 8px;
                }
              }
            }

            .approve-content {
              display: flex;
              align-items: center;
              justify-content: center;

              .approve-info {
                display: flex;
                flex-direction: column;

                .approve-title {
                  font-size: 24px;
                  font-weight: 600;
                  color: #000;
                }

                .approve-name {
                  width: 100%;
                  display: flex;
                }
              }
            }
          }
        }
      }
    }

    .detail-progress {
      width: 400px;
      height: max-content;
      padding: 24px;
      box-sizing: border-box;
      background: #fff;

      .progress-title {
        width: 100%;
        display: flex;
        align-items: center;
        margin-bottom: 20px;

        span {
          font-size: 16px;
          color: #000;
          font-weight: 600;
          display: flex;
          align-items: center;
        }

        span::before {
          content: '';
          width: 4px;
          height: 16px;
          background: #006aff;
          display: inline-block;
          margin-right: 10px;
        }
      }
    }
  }
</style>
